<template>
     <div class="bf-toolbar bf-toolbar-bottom" title="主菜单">
    		<div class="bf-button gld-bf-home" title="全图" @click="activeEventHome">
    			<img class="home-img" src='images/home.png'></img>
    		</div>
    		<div class="bf-button gld-bf-zoomrect" title="鹰眼" @click="activeEagleMap">
                <img class="open-img" src='images/eye.png'></img>
            </div>
			<div class="bf-button gld-bf-select" title="选择"  @click="activeEventSelect">
			     <img class="select-img" src='images/select.png'></img>
			</div>
    		<div class="bf-button gld-bf-measure" title="测量"  @click="activeEventMeasure">
    			<img class="colse-img" src='images/measure.png'></img>
    		</div>
    		<div class="bf-button gld-bf-sectionbox" title="监测面板">
    			<img class="save-img" src='images/chart.png'  @click="activeEventChart"></img>
    		</div>
       </div>
</template>
<script>
    export default {
        name: "navigationcontrol",
		data(){
            return{
                toolEventMessage: ""
                //toolEventMessage2: ""
			}
		},
		methods:{
            activeEventHome(){
                this.toolEventMessage = "HomeEvent";
                this.$emit("toolEventChange",this.toolEventMessage);
			},
            activeEagleMap(){
                this.toolEventMessage = "EagleMapEvent";
                this.$emit("toolEventChange",this.toolEventMessage);
            },
            activeEventSelect(){
                this.toolEventMessage = "SelectEvent";
                this.$emit("toolEventChange",this.toolEventMessage);
			},
            activeEventMeasure(){
                this.toolEventMessage = "MeasureEvent";
                this.$emit("toolEventChange",this.toolEventMessage);

            },
            activeEventChart(){
                this.toolEventMessage = "ChartPanel";
                this.$emit("toolEventChange",this.toolEventMessage);
            }
		}
    }
</script>

<style scoped>
         .bf-toolbar.bf-toolbar-bottom {
           		 	position: relative;
           		 	left: 50%;
           			 /*bottom: 10px;*/
            		transform: translate(-50%, 0);
        }
		.bf-toolbar {
		    box-sizing: border-box;
		    border: 1px solid #333;
		    background-color: rgba(17,17,17,0.88);
		    z-index: 99;
		    white-space: nowrap;

		}
        .bf-toolbar .bf-button {
    		margin-left: 1px;
		}
		.bf-button {
		    color: #fff;
		    opacity: .6;
		    box-sizing: border-box;
		    text-align: center;
		    height: 50px;
		    padding: 9px;
		    line-height: 32px;
		    cursor: pointer;
		    display: inline-block;
		    font-size: 32px;
		    vertical-align: top;
		    font-family: 'gld-bimface';
		}
		.home-img {
            background: transparent;
            width:30px;
            height:30px;
        }
        .open-img {
            background: transparent;
            width:30px;
            height:30px;
        }
		.select-img{
			background: transparent;
			width:30px;
			height:30px;
		}
        .colse-img {
            background: transparent;
            width:30px;
            height:30px;
        }
        .save-img {
            background: transparent;
            width:30px;
            height:30px;

        }
		img:hover {
			-webkit-filter: brightness(1.3);
			filter: brightness(1.3);

		}
</style>
